{% extends 'partials/base.html.twig' %}

{% block head %}
    <meta charset="utf-8" />
    <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>
    {% include 'partials/metadata.html.twig' %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" type="image/png" href="{{ theme_url }}/img/favicon.ico" />

    {% block stylesheets %}
        {% do assets.addCss('theme://css/bootstrap.css') %}
        {% do assets.addCss('theme://css/style.css') %}
        {% do assets.addCss('theme://css/touchTouch.css') %}

        {% if browser.getBrowser == 'msie' and browser.getVersion < 9 %}
         {% do assets.addCss('theme://assets/tm/css/tm_docs.css') %}
     {% endif %}

 {% endblock %}
 {{ assets.css() }}

 {% block javascripts %}
    {% do assets.add('jquery',101) %}
    {% do assets.addJs('theme://js/jquery-migrate-1.2.1.js') %}
    {% do assets.addJs('theme://js/superfish.js') %}
    {% do assets.addJs('theme://js/jquery.mobilemenu.js') %}
    {% do assets.addJs('theme://js/jquery.easing.1.3.js') %}
    {% do assets.addJs('theme://js/jquery.ui.totop.js') %}
    {% do assets.addJs('theme://js/jquery.touchSwipe.min.js') %}
    {% do assets.addJs('theme://js/jquery.equalheights.js') %}
    {% do assets.addJs('theme://js/touchTouch.jquery.js') %}
    {% do assets.addJs('theme://js/jquery.isotope.min.js') %}

    {% if browser.getBrowser == 'msie' and browser.getVersion < 9 %}
        {% do assets.addJs('theme://assets/assets/js/html5shiv.js') %}
        {% do assets.addJs('theme://assets/assets/js/respond.min.js') %}
    {% endif %}

{% endblock %}
{{ assets.js() }}

<script>

$(window).load(function() {  
    var $container = $('#container');
    //Run to initialise column sizes
    updateSize();

    //Load masonry when images all loaded
    $container.imagesLoaded( function(){

        $container.isotope({
            // options
            itemSelector : '.element',  
            layoutMode : 'masonry',
            transformsEnabled: true,
            columnWidth: function( containerWidth ) {
                containerWidth = $browserWidth;
                return Math.floor(containerWidth / $cols);
            }
        });
    });
    
        // update columnWidth on window resize
        $(window).smartresize(function(){  
            updateSize();
            $container.isotope( 'reLayout' );
        });

    //Set item size
    function updateSize() {
        $browserWidth = $container.width();
        $cols = 4;

        if ($browserWidth >= 1170) {
            $cols = 4;
        }
        else if ($browserWidth >= 800 && $browserWidth < 1170) {
            $cols = 3;
        }
        else if ($browserWidth >= 480 && $browserWidth < 800) {
            $cols = 2;
        }
        else if ($browserWidth >= 320 && $browserWidth < 480) {
            $cols = 1;
        }
        else if ($browserWidth < 401) {
            $cols = 1;
        }
        //console.log("Browser width is:" + $browserWidth);
        //console.log("Cols is:" + $cols);

        // $gutterTotal = $cols * 20;
        $browserWidth = $browserWidth; // - $gutterTotal;
        $itemWidth = $browserWidth / $cols;
        $itemWidth = Math.floor($itemWidth);

        $(".element").each(function(index){
            $(this).css({"width":$itemWidth+"px"});             
        });



        var $optionSets = $('#options .option-set'),
        $optionLinks = $optionSets.find('a');

        $optionLinks.click(function(){
            var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
      }
      var $optionSet = $this.parents('.option-set');
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
      } else {
          // otherwise, apply new options
          $container.isotope( options );
      }

      return false;
  });       

    };

        // Initialize the gallery
        $('.thumb').touchTouch();

    });

</script>

{% if browser.getBrowser == 'msie' and browser.getVersion < 9 %}
   <div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>
{% endif %}

{% endblock head%}


{% block content %}
    <div id="content">
        <div class="row_6">
            <div class="container">
                <h2 class="pad_bot3">{{ page.header.title }}</h2>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div id="options" class="clearfix">
                            <ul id="filters" class="pagination option-set clearfix" data-option-key="filter">
                                <li><a href="#filter" data-option-value="*" class="selected">Show all</a></li>
                                {% for item in page.header.filters %}
                                    <li><a href="#filter" data-option-value=".{{ item.name }}">{{ item.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="containerExtra">
                            <div id="container" class="clearfix">
                                {% for element in page.header.gallery  %}
                                    <div class="element transition {{ element.filter }}" data-category="transition">
                                        <a href="{{ page.media[element.image].url }}" class="thumb"><figure class="img-polaroid">{{ page.media[element.image].resize(270, 190).html() }}</figure></a><span class="description">{{ element.description }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                            {{ page.content }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}